<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scale">
    <title>警告框插件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        #view{
            width: 300px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body style="margin:200px;">
<!--<div class="alert alert-warning fade in">
    <button class="close" data-dismiss="alert">
        <span>&times;</span>
    </button>
    <p>警告：你的浏览器不支持！</p>
</div>-->

<div id="alert" class="alert alert-warning fade in">
    <button class="close">
        <span>&times;</span>
    </button>
    <p>警告：你的浏览器不支持！</p>
</div>

<script>
    $('.close').on('click',function(){
        $('#alert').alert('close');
    });

    $('#alert').on('close.bs.alert',function(){
        alert('close');
    });


</script>
</body>
</html>